<template>
  <u-select
    v-model="show"
    mode="mutil-column-auto"
    :list="list"
    value-name="dm"
    label-name="name"
    child-name="childList"
    :mask-close-able="false"
    @confirm="confirm"
    @cancel="selectCancel"
  >
    <slot></slot>
  </u-select>
</template>

<script>
import { apiGetOneCity } from '@/api/common'
export default {
  name: '',
  components: {},
  mixins: [],
  props: {
    // 省市区code
    value: {
      type: Array,
      default: []
    },
    selectShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: '',
      list: []
    }
  },
  watch: {
    selectShow: {
      handler(v) {
        console.log(v)
        this.show = v
      }
    },
    value: {
      handler(n) {
        console.log('n*************', n)
        if (n.length === 3) {
          this.getCity(n[0])
        }
      },
      immediate: true,
      deep: true
    }
  },
  filter: {},
  created() {},
  mounted() {},
  methods: {
    confirm(e) {
      console.log(e)
      let code = e.map(item=>item.value)
      let name = e.map(item=>item.label)
      // 组织emit参数
      this.$emit('confirm',{code,name})
    },
    // 取消
    selectCancel() {
      this.$emit('cancel', false) 
    },
    getCity(code) {
      apiGetOneCity({ code }).then((res) => {
        // childList为空时，清除childList属性，否则组件报错
        res.data.data[0].childList.forEach(item=>{
          item.childList.forEach(item1=>{
              delete item1.childList
          }) 
        })   
        this.list = res.data.data
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
